import { useState, useEffect } from 'react';
import { DatePicker, Select, ConfigProvider, Button } from 'antd';
import axios from 'axios';
import './Appointmentboard.css'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';  // 引入 antd 的中文语言包
dayjs.locale('zh-cn');
import { SearchOutlined } from '@ant-design/icons';


const onChange = (date, dateString) => {
  console.log(date, dateString);
};

//搜索服务人员
const onSearchChange = (value) => {
  console.log(`selected ${value}`);
};
const onSearch = (value) => {
  console.log('search:', value);
};

//搜索服务类型
const onSearchChangeCate = (value) => {
  console.log(`selected ${value}`);
};
const onSearchCate = (value) => {
  console.log('search:', value);
};
export default function Appointmentboard() {
  let [serveOptions, setServeOption] = useState([])//服务人员
  let [serveCate, setServeCate] = useState([])  //服务类型
  //获取服务人员
  const getServe = async () => {
    try {
      const { data: { code, list } } = await axios.get(`http://127.0.0.1:3000/zzj/serve/list`)
      console.log('服务人员原始数据:', list)
      if (code == 200) {
        const formattedList = list.map(item => ({
          value: item.id || item._id,
          label: item.name || item.title
        }));
        console.log('格式化后的服务人员数据:', formattedList)
        setServeOption(formattedList)
      }
    } catch (error) {
      console.error('获取服务人员数据失败:', error)
    }
  }
  //获取服务类型
  const getServeCate = async () => {
    const { data: { code, list } } = await axios.get(`http://127.0.0.1:3000/zzj/cate/list`)
    if (code == 200) {
      // 转换数据格式
      const formattedList = list.map(item => ({
        value: item.id || item._id,
        label: item.name || item.title
      }));
      setServeCate(formattedList)
    }
  }

  useEffect(() => {
    getServe()
    getServeCate()

    // 添加调试日志
    console.log('serveOptions:', serveOptions)
    console.log('serveCate:', serveCate)
  }, [])
  return (
    <>
      <ConfigProvider locale={zhCN}>
        <div className='zzj_appon_big_div'>
          <div
            className='zzj_appon_content_div'
          // id="scrollableDiv"
          // onScroll={handleScroll}
          >
            <div className='zzj_appon_div_one'>
              <div className='zzj_appon_div_one_top'>
                <div></div>
                <span>预约看板</span>
              </div>
              <div className='zzj_appon_div_one_content'>
                <div className='zzj_appon_date_div'>
                  <span>选择日期</span>
                  <DatePicker
                    onChange={onChange}
                    style={{ height: '1rem', width: '5rem' }}
                    format="YYYY-MM-DD"
                    placeholder="请选择日期"
                  />
                </div>
                <div style={{ marginLeft: '0.5rem' }}>
                  <span>服务人员</span>
                  <Select
                    showSearch
                    placeholder="请选择服务人员"
                    optionFilterProp="children"
                    onChange={onSearchChange}
                    style={{ height: '1rem', width: '5rem' }}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    options={serveOptions}
                  />
                </div>
                <div style={{ marginLeft: '0.5rem' }}>
                  <span>服务类型</span>
                  <Select
                    showSearch
                    placeholder="请选择服务类型"
                    optionFilterProp="children"
                    onChange={onSearchChangeCate}
                    style={{ height: '1rem', width: '5rem' }}
                    onSearch={onSearchCate}
                    filterOption={(input, option) =>
                      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    options={serveCate}
                  />
                </div>
                <div style={{ marginLeft: '0.5rem' }}>
                  <Button type="primary" style={{ height: '1rem', width: '1rem' }} shape="circle"
                    icon={<SearchOutlined style={{ fontSize: '0.5rem' }} />} />
                </div>
              </div>
            </div>

            <div className='zzj_appon_div_two'>
                  <div className='zzj_appon_div_two_div1'>
                    <span>9:00</span>
                    <div className='zzj_appon_div_two_div1_div'>

                    </div>
                  </div>
            </div>

            {/* 标注盒子 */}
            <div className='zzj_appon_label_div'>
              <p>Copyright © DaisyAxure All Rights Reserved</p>
            </div>
          </div>
        </div>
      </ConfigProvider>
    </>
  )
}
